<!DOCTYPE html>
<html>
    <head>
        <title>event bind</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./vendor/avalon/avalon.modern.min.js" ></script>
        <style>
           .ms-hover div:hover{
                background:yellowgreen;
            }
        </style>
        <script type="text/javascript">
        
            // 我们也可以用$fire更改属性值。这样就可以打破不能触发非监控属性的回调的藩蓠，但要注意死循环，需要自己比较新旧值是否真的发生改变才触发。
            var model = avalon.define({
                $id: "test",
                aaa: "2",
                bbb: "2",
                $ccc: "1",
                ddd: "1",
                $skipArray: ["ddd"],
                click: function(a) {
                    var old = model[a]
                    model.$fire(a, new Date - 0, old)
                }
            })
            model.$watch("$all", function(name, a, b) {
                console.log(name, a, b)
            })

            

           


            
        </script>
    </head>
    <body>
        <div ms-controller="test" class='ms-hover'>
            <div ms-click="click('aaa')">{{aaa}}</div>
            <div ms-click="click('bbb')">{{bbb}}</div>
            <div ms-click="click('$ccc')">{{$ccc}}</div>
            <div ms-click="click('ddd')">{{ddd}}</div>
        </div>

       
    </body>
</html>
